<!--  -->
<template>
	<div>
		<cu-custom :bgImage="bgImage" :needBack="true" bgColor="bgNormal" topTitle="申报" titleClass="commTitleWhite"
			backIconColor="#fff"></cu-custom>
		<view class="content">
			<u-form :model="form" ref="uForm" id="uForm" label-width="230" :label-style="{
          color: '#666',
        }">
				<view class="form-item">
					<u-form-item label="组织名称" prop="name" required>
						<u-input v-model="form.name" placeholder="请填写组织名称"  :disabled="true"/>
					</u-form-item>
				</view>
				
				<view class="form-item">
					<u-form-item label="社会组织类型" prop="typeName" required>
						<u-select v-model="typeShow" :list="typeList" @confirm="typeConfirm" value-name="id" label-name="type" :default-value="socialOrganizationTypeId"></u-select>
						<u-input v-model="form.typeName" placeholder="请选择" type="select" @click="typeShow = true"/>
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="业务主管单位" prop="unitInfoName" required>
						<u-select v-model="unitInfoIdShow" :list="unitInfoIdList" @confirm="unitConfirm" value-name="id" label-name="name" :default-value="unitInfoId"></u-select>
						<u-input v-model="form.unitInfoName" placeholder="请选择" type="select" @click="unitInfoIdShow = true"/>
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="申报级别" prop="levelName" required>
						<u-select v-model="levelShow" :list="levelList" @confirm="levelConfirm" value-name="id" label-name="level" :default-value="declarationLevelId"></u-select>
						<u-input v-model="form.levelName" placeholder="请选择"  type="select" @click="levelShow = true"/>
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="法定代表人" prop="legalPerson" required>
						<u-input v-model="form.legalPerson" placeholder="请输入法人姓名" />
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="法定代表人电话" prop="phone" required>
						<u-input v-model="form.phone" placeholder="请输入法人电话" />
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="承诺书" prop="isChoose" required>
						<view class="letter">
							<u-checkbox @change="form.isChoose = !form.isChoose" v-model="form.isChoose" shape="circle" />
							<view class="words">我已阅读并同意填写</view>
							<view class="href" @tap="showProtocol(1)">
								《承诺书》
							</view>
						</view>
						
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="图片上传(请上传社会组织章程第一章)" prop="isChoose" required label-width="500">
						<u-upload max-count="1" :file-list="fileList" :auto-upload="false" @on-choose-complete="beforeUpload" @on-remove="remove"></u-upload>
            
					</u-form-item>
				</view>
				
			</u-form>
		</view>
		<u-popup mode="center" v-model="showProtocal" width="632" height="936" border-radius="20">
			<view class="protocol-content">
				<view class="title">  </view>
				<scroll-view scroll-y>
					<view class="content">
						<rich-text class="context" :nodes="letter"></rich-text>
					</view>
				</scroll-view>
				<button class="known" @tap="showProtocal = false">我已知晓</button>
			</view>
		</u-popup>
		<view class="save">
			<button @click="next">下一步</button>
		</view>
	</div>
</template>

<script>
	import { getUnitInfo, getdDclarationLevel2, getSocialOrganizationType2, getDeclaration,getDeclarationDetail } from "@/api/report.js";
	import { getCommitmentLetter } from "@/api/home.js";
	import baseUrl from "@/api/baseUrl.js";
	export default {
		data() {
			return {
				form: {
					name: "", // 组织名称
					socialOrganizationTypeId: "", // 社会组织类型
					typeName: "",
					declarationLevelId: "", // 申报级别
					levelName: "",
					unitInfoId: '',
					unitInfoName: '',
					legalPerson: "", // 法定代表人
					phone: "", // 法定代表人电话
					isChoose: "", // 承诺书
					signatureFileId: '',
					fileId: ''
				},
				typeShow: false,
				levelShow: false,
				unitInfoIdShow: false,
				showProtocal: false,
				typeList: [],
				levelList: [],
				unitInfoIdList: [],
				userInfo: {},
				letter: '' ,//承诺书
				list1: [],
				list2: [],
				detail: {},
				socialOrganizationTypeId:[0],
				declarationLevelId: [0],
				unitInfoId: [0],
				fileList: [],
				isEdit: 1  //1表示不编辑2表示编辑
				
			};
		},
		async onLoad(options) {
			
			this.userInfo = uni.getStorageSync('userInfo')
			this.form.name =   this.userInfo.userName
			await this.getDeclarationDetail()
			await this.getNeedData()
			await this.getLetter()
			if(options.id) {
				this.isEdit = 2
				let res = await getDeclarationDetail(options.id)
				this.detail = res.data
				this.form.phone = this.detail.phone
				this.form.legalPerson = this.detail.legalPerson
				this.form.fileId = this.detail.fileId
				this.form.socialOrganizationTypeId = this.detail.socialOrganizationTypeId
				this.typeList.map((item,index)=> {
					if(item.id == this.form.socialOrganizationTypeId) {
						this.socialOrganizationTypeId = [index]
						this.form.typeName = item.type
					}
				})
				this.form.declarationLevelId = this.detail.declarationLevelId
				this.levelList.map((item,index)=> {
					if(item.id == this.form.declarationLevelId) {
						this.declarationLevelId = [index]
						this.form.levelName = item.level
					}
				})
				this.form.unitInfoId = this.detail.unitInfoId
				this.unitInfoIdList.map((item,index)=> {
					if(item.id == this.form.unitInfoId) {
						this.unitInfoId = [index]
						this.form.unitInfoName = item.name
					}
				})
				this.form.id = this.detail.id
				this.fileList[0] = {url:this.detail.url}
			}
			// this.form.unitInfoId = this.userInfo.userId
		},
		methods: {
			remove() {
				this.form.fileId = ''
			},
			beforeUpload(list) {
				const token = uni.getStorageSync("access_token");
				uni.uploadFile({
				  header: {
				    Authorization: "Bearer " + token,
				  },
				  url: baseUrl + "/minio/uploadFile", //仅为示例，非真实的接口地址
				  filePath: list[0].url,
				  name: "file",
				  success: (res) => {
				    let data = JSON.parse(res.data);
				    if (data.code == 200) {
				      console.log(data);
					  this.form.fileId = data.data.id
				      uni.hideLoading();
				    } else {
				      uni.showToast({
				        title: data.msg,
				        icon: "none",
				        duration: 2000,
				      });
				      uni.hideLoading();
				    }
				  },
				});
			},
			async getDeclarationDetail() {
				let id = uni.getStorageSync("currentDeclarationId")
				let res = await getDeclaration(id)
				this.list1 = res.data.levelIds
				this.list2 = res.data.typeIds
			},
			async getNeedData() {
				//社会组织类型
				let id = uni.getStorageSync("currentDeclarationId")
				let res = await getSocialOrganizationType2({declarationSystemId:id})
				console.log(this.list2)
				// this.typeList = res.data.filter(item => this.list2.includes(item.id))
				this.typeList = res.data
				
				//单位
				let res2 = await getUnitInfo()
				this.unitInfoIdList = res2.data
				
				let res3 = await getdDclarationLevel2({declarationSystemId:id})
				// this.levelList = res3.data.filter(item => this.list1.includes(item.id))
				this.levelList = res3.data
			},
			
			typeConfirm(e) {
				this.typeList.map((item,index)=> {
					if(item.id == e[0].value) {
						this.socialOrganizationTypeId = [index]
					}
				})
				this.form.socialOrganizationTypeId = e[0].value
				this.form.typeName = e[0].label
			},
			
			unitConfirm(e) {
					
				this.unitInfoIdList.map((item,index)=> {
					if(item.id == e[0].value) {
						this.unitInfoId = [index]
					}
				})
				this.form.unitInfoId = e[0].value
				this.form.unitInfoName = e[0].label
			},
			
			//获取承诺书
			async getLetter() {
				let res = await getCommitmentLetter()
				this.letter = res.data.commitmentLetter
				console.log(res)
			},
			
			levelConfirm(e) {
				this.levelList.map((item,index)=> {
					if(item.id == e[0].value) {
						this.declarationLevelId = [index]
					}
				})
				this.form.declarationLevelId = e[0].value
				this.form.levelName = e[0].label
			},
			// 完成
			next() {
				if (!this.form.socialOrganizationTypeId) {
					return uni.showToast({
						title: "请选择社会组织类型",
						icon: "none",
					});
				} else if (!this.form.unitInfoId) {
					return uni.showToast({
						title: "请选择主管单位",
						icon: "none",
					});
				} else if (!this.form.declarationLevelId) {
					return uni.showToast({
						title: "请选择申报级别",
						icon: "none",
					});
				} else if (!this.form.legalPerson) {
					return uni.showToast({
						title: "请输入法定代表人名字",
						icon: "none",
					});
				} else if (!this.form.phone) {
					return uni.showToast({
						title: "请输入法定代表人手机号",
						icon: "none",
					});
				} else if (!this.form.isChoose) {
					return uni.showToast({
						title: "请输入勾选承诺书",
						icon: "none",
					});
				} else if (!this.form.fileId) {
					return uni.showToast({
						title: "请上传社会组织章程第一页",
						icon: "none",
					});
				} 
				uni.navigateTo({
				  url: '/packageA/report/takeName?form=' + JSON.stringify(this.form)+'&isEdit='+this.isEdit
				});
			},
			showProtocol() {
				this.showProtocal = true
			}
		},
		components: {},
	};
</script>
<style lang="scss" scoped>
	.content {
		color: #666;
		font-size: 28rpx;

		.content_title {
			padding-left: 29rpx;
			line-height: 94rpx;
			background: #f2f2f2;
			color: #333;
		}

		.form-item {
			padding: 0 0 0 34rpx;
		}
	}

	.save {
		button {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 93rpx;
			width: 600rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #417ffc, #505eeb);
			box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
			border-radius: 40rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	::v-deep {
		.u-input {
			padding-right: 20rpx !important;
			text-align: right !important;
		}
		.u-upload {
			justify-content: flex-end;
		}
	}
	.letter {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.words {
			color: #666666;
			padding-top: 4rpx;
			margin-left: -15rpx;
		}
		.href {
			padding-top: 4rpx;
			color: #4D70F8;
		}
	}
	
	.protocol-content {
		height: calc(100% - 88rpx);
		background: #fff;
	
		.title {
			padding: 48rpx 0 36rpx 0;
			color: #282a31;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}
	
		.content {
			height: 700rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #565965;
			line-height: 48rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;
	
			.sub_title {
				font-weight: 600;
				color: #282A31;
			}
		}
	}
	.known {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		font-size: 28rpx;
		background: #436be6;
		border-radius: 0;
	}
	
	.known:after {
		border: none;
	}
</style>